{extend name="public/base"/}
{block name="body"}
<style>
.mui-table-view-cell p {
    margin-bottom: 0;
    font-size: 12px;
}
.mui-table-view .mui-media-object {
    line-height: 42px;
    max-width: 60px;
    height: 60px;
}
.mui-card-header {
    font-size: 14px;
    border-radius: 2px 2px 0 0;
        padding: 5px 10px;
}
.mui-h5, h5 {
     font-size: 12px;
    font-weight: 400;
    color: #8f8f94;
}
</style>
<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">订单详情</h1>
</header>
<div class="mui-content">
<div class="mui-card" >
    <div class="mui-card-header ">
        <div class="mui-ellipsis mui-col-xs-8">订单商品</div>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        {volist name="orderInfo.OrderShoplist" id="vo"}
          <li class="mui-table-view-cell">
              <div class="mui-table"  style="font-size:12px;">
                  <div class="mui-table-cell mui-col-xs-8">
                      {$vo.good_name}
                      ({$vo.rule_name})

                  </div>
                  <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                      <span class="mui-h5">x{$vo.num}</span>
                  </div>
                  <div class="mui-table-cell mui-col-xs-4 mui-text-right">
                      <span class="mui-h5">¥{$vo.num*$vo.price}</span>
                  </div>
              </div>
                <p>商家：{$vo.shop_name},成本:{$vo.cost_price}元,代理:{$vo.agent_price}元</p>
          </li>
        {/volist}

        <li class="mui-table-view-cell">
            <div class="mui-table"  style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-12">
                    商品总额:¥{$orderInfo.shop_price} <br />运费:¥{$orderInfo.freight} 运费补贴:¥{$orderInfo.subsidy} 优惠券:¥{$orderInfo.coupon_id|get_table_field="id","price","CouponList"} 余额:¥{$orderInfo.balance}
                    <br />实付：¥{$orderInfo.total}
                </div>
            </div>
        </li>
    </ul>
</div>



<div class="mui-card">
    <div class="mui-card-header ">
        <div class="mui-ellipsis mui-col-xs-8">配送信息</div>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    收货人
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.user_name}
                    </span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    配送地址
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.address}
                    </span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    联系电话
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.tel}
                    </span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    指定配送时间
                </div>
                <div class="mui-table-cell mui-col-xs-8 ">
                    <span class="mui-h5">
                      {$orderInfo.deliverytime}
                    </span>
                </div>
            </div>
        </li>
        {in name="orderInfo.buystatus" value="3,4"}
          <li class="mui-table-view-cell">
              <div class="mui-table" style="font-size:12px;">
                  <div class="mui-table-cell mui-col-xs-4">
                      配送师傅
                  </div>
                  <div class="mui-table-cell mui-col-xs-8 ">
                      <span class="mui-h5">
                        {$orderInfo.allot_person|get_table_field="id",'name','DeliveryPerson'}
                      </span>
                  </div>
              </div>
          </li>
          <li class="mui-table-view-cell">
              <div class="mui-table" style="font-size:12px;">
                  <div class="mui-table-cell mui-col-xs-4">
                      师傅电话
                  </div>
                  <div class="mui-table-cell mui-col-xs-8 ">
                      <span class="mui-h5">
                        {$orderInfo.allot_person|get_table_field="id",'tel','DeliveryPerson'}
                      </span>
                  </div>
              </div>
          </li>
        {/in}
    </ul>

    <script src="__PUBLIC__/xsd/js/clipboard.min.js"></script>
    <textarea id="foo"  style="     height: 10px;  margin-left: -1000px;margin-bottom: 0;"  >
      商品：{volist name="orderInfo.OrderShoplist" id="vo"}{$vo.good_name}({$vo.rule_name}) {/volist}
        收货人：{$orderInfo.user_name}
        收货电话：{$orderInfo.tel}
        配送地址:{$orderInfo.address}
        发货人：何新 15885108322
    </textarea>

    <button class="btn " data-clipboard-target="#foo" aria-label="复制成功！" style="margin: 0 auto;display: block;">复制配送信息</button><br />
    <script>
    //new Clipboard('.btn');
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
    	var msg = e.trigger.getAttribute('aria-label');
      console.log(e);
    	alert(msg);

        e.clearSelection();
    });
    </script>
</div>


<div class="mui-card" >
    <div class="mui-card-header ">
        <div class="mui-ellipsis mui-col-xs-8">订单信息</div>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  订单编号
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo.out_trade_no}
                  </span>
              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  下单时间
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo.create_time}
                  </span>
              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  支付方式
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo['pay']|parse_config_value='pay'}
                  </span>
              </div>
          </div>
      </li>
      <li class="mui-table-view-cell">
          <div class="mui-table" style="font-size:12px;">
              <div class="mui-table-cell mui-col-xs-4">
                  送货方式
              </div>
              <div class="mui-table-cell mui-col-xs-8 ">
                  <span class="mui-h5">
                    {$orderInfo['way']|parse_config_value='distribution'}
                  </span>
              </div>
          </div>
      </li>
    </ul>
</div>



</div>
{/block}
{block name="script"}
<script>
  mui.init({
    swipeBack:true //启用右滑关闭功能
  });
  $('#scroll').height($(window).height()-44)
</script>
{/block}
